<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商城</title>
    <link rel="stylesheet" href="css/header.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/content.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/footer.css" media="screen" title="no title" charset="utf-8">
    <style media="screen">
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        input {
            outline: 0;
        }
    </style>
</head>

<body>
    <!--  头部-->
    <div class="header">
        <div class="head">
            <ul class="firstHead">
                <li><a href="index.html" target="_blank">波奇首页</a></li>
                <li><a href="shop.html" target="_blank">波奇商城</a></li>
                <li><a href="serve.html" target="_blank">波奇服务</a></li>
                <li><a href="message.html" target="_blank">波奇论坛</a></li>
                <li><a href="cyclopedia.html" target="_blank">宠物百科</a></li>
            </ul>
            <ul class="attention">
                <li><a href="#">关注我们<span><img src="" alt="" /></span></a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#"><span><img src="" alt="" /></span>收藏</a></li>
            </ul>
            <ul class="register">
                <li><a href="login.html" target="_blank">登陆</a></li>
                <li><a href="script:;">|</a></li>
                <li><a href="register.html" target="_blank">免费注册</a></li>
            </ul>
            <ul class="userLogin">
                <li>
                    <a href="script:;" id="userName"></a>
                </li>
                <li>|</li>
                <li><a href="script:;" id="quit">退出</a></li>
            </ul>

        </div>
    </div>
    <div class="navigation">
        <div class="logo">
            <img src="source/images/logo.png" alt="" />
        </div>
        <div class="serch">
            <input id="keyword" type="text" name="name" value="" placeholder="请输入关键字">
            <img id="search" src="source/images/ind_sch.png" alt="" />
        </div>
        <div class="app">
            <a href="#"><img src="source/images/app.jpeg" alt="" /></a>
        </div>
    </div>
    <div class="content_wrap">
        <div class="top_nav">
            <div class="nav_wrap">
                <div class="nav_left">
                    <a href="script:;"><span>全部商品分类</span></a>
                    <a href="script:;"><em></em></a>
                </div>
                <div class="nav_middle">
                    <a href="shop.html" class="homePage">首页</a>
                    <a href="#dog">狗狗</a>
                    <a href="#cat">猫猫</a>
                    <a href="#spet">小宠</a>
                    <a href="#fish">水族</a>
                    <a href="#reptile">爬虫</a>
                    <a href="serve.html" target="_blank">波奇服务</a>
                </div>
                <div class="nav_right">
                    <div class="shop_right" id = "shoplist">
                        <div class="shop_text">
                            <em></em>
                            <a href="script:;">购物车</a>
                        </div>
                        <span></span>
                    </div>

                </div>
            </div>
        </div>
        <div class="top_header_color">
            <div class="top_header">
                <div class="top_left">
                    <!-- 狗狗商品 -->
                    <div class="top_list" id="list001">
                        <div class="top_list_l" style="height: 93px">
                            <div class="top_tit">
                                <em></em><a href="script:;">狗狗商品</a>
                                <span></span>
                            </div>
                            <div class="top_body">
                                <span><a href="script:;">狗粮</a></span>
                                <span><a href="script:;">狗罐头</a></span>
                                <span><a href="script:;">狗零食</a></span>
                                <span><a href="script:;">医疗</a></span>
                                <span><a href="script:;">保健</a></span>
                                <span><a href="script:;">沐浴露</a></span>
                                <span><a href="script:;">日用平</a></span>
                                <span><a href="script:;">玩具</a></span>
                                <span><a href="script:;">衣服</a></span>
                            </div>
                        </div>
                        <!-- 要显示的区域 -->
                        <div class="condiv0" id="condiv001">
                            <dl>
                                <dt><a href="script:;" >宠物狗粮</a></dt>
                                <dd>|&nbsp<a href="script:;" >离乳期犬粮</a>|&nbsp<a href="script:;" >幼犬粮</a>|&nbsp<a href="script:;" >成犬粮</a>|&nbsp<a href="script:;" >老犬粮</a>|&nbsp<a href="script:;" >全犬粮</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >狗罐头/妙鲜包</a></dt>
                                <dd>|&nbsp<a href="script:;" >成犬</a>|&nbsp<a href="script:;" >幼犬</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >狗狗零食</a></dt>
                                <dd>|<a href="script:;" >肉质零食</a> |
                                    <a href="script:;" >咬骨咬胶</a> |
                                    <a href="script:;" >奶质零食</a> |
                                    <a href="script:;" >饼干素食</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >狗狗保健品</a></dt>
                                <dd>|<a href="script:;" >美毛护肤</a> |
                                    <a href="script:;" >补钙强骨</a> |
                                    <a href="script:;" >微量矿物</a> |
                                    <a href="script:;" >调理肠胃</a> |
                                    <a href="script:;" >综合营养</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >狗狗医疗</a></dt>
                                <dd>|<a href="script:;" >体内驱虫</a> |
                                    <a href="script:;" >体外驱虫</a> |
                                    <a href="script:;" >口腔修护</a> |
                                    <a href="script:;" >眼部护理</a> |
                                    <a href="script:;" >耳道清洁</a> |
                                    <a href="script:;" >体内病源感染</a> |
                                    <a href="script:;" >皮肤问题</a> |
                                    <a href="script:;" >试纸及清洁其它</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >狗狗沐浴露</a></dt>
                                <dd>|<a href="script:;" >幼犬专用</a> |
                                    <a href="script:;" >药用香波</a> |
                                    <a href="script:;" >美毛去味</a> |
                                    <a href="script:;" >特色毛发</a> |
                                    <a href="script:;" >干洗粉</a> |
                                    <a href="script:;" >护毛素/护掌</a> |
                                    <a href="script:;" >稀释瓶</a> |
                                    <a href="script:;" >洗手液</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >狗狗日用品</a></dt>
                                <dd>|<a href="script:;" >器具系列</a> |
                                    <a href="script:;" >牵引系列</a> |
                                    <a href="script:;" >出行装备</a> |
                                    <a href="script:;" >排便用品</a> |
                                    <a href="script:;" >环境清洁</a> |
                                    <a href="script:;" >狗狗训练</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >狗狗美容</a></dt>
                                <dd>|<a href="script:;" >吊牌挂件</a> |
                                    <a href="script:;" >毛巾系列</a> |
                                    <a href="script:;" >梳子/刷子系列</a> |
                                    <a href="script:;" >修剪系列</a> |
                                    <a href="script:;" >吹风机</a> |
                                    <a href="script:;" >画笔工具</a> |
                                    <a href="script:;" >洗澡用品</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >狗狗玩具</a></dt>
                                <dd>|<a href="script:;" >休闲玩具</a> |
                                    <a href="script:;" >益智训导</a> |
                                    <a href="script:;" >互动玩具</a> |
                                    <a href="script:;" >磨牙玩具</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >狗狗衣服/狗窝</a></dt>
                                <dd>|<a href="script:;" >宠物服装</a> |
                                    <a href="script:;" >犬窝犬笼</a> |
                                    <a href="script:;" >毛毯/垫子/凉席</a> |
                                    <a href="script:;" >鞋子/袜子/帽子</a></dd>
                            </dl>
                        </div>
                    </div>
                    <!-- 猫猫用品 -->
                    <div class="top_list">
                        <div class="top_list_l" style="height: 93px">
                            <div class="top_tit">
                                <em style="background-position:-226px -170px"></em><a href="script:;">猫猫商品</a>
                                <span></span>
                            </div>
                            <div class="top_body">
                                <span><a href="script:;">猫粮</a></span>
                                <span><a href="script:;">猫罐头</a></span>
                                <span><a href="script:;">猫零食</a></span>
                                <span><a href="script:;">医疗</a></span>
                                <span><a href="script:;">保健</a></span>
                                <span><a href="script:;">沐浴露</a></span>
                                <span><a href="script:;">日用平</a></span>
                                <span><a href="script:;">玩具</a></span>
                                <span><a href="script:;">猫窝</a></span>
                            </div>
                        </div>
                        <!-- 要显示的区域 -->
                        <div class="condiv0" id="condiv002">
                            <dl>
                                <dt><a href="script:;" >宠物猫粮</a></dt>
                                <dd>|&nbsp<a href="script:;" >成猫粮</a>|&nbsp<a href="script:;" >幼猫粮</a>|&nbsp<a href="script:;" >全猫粮</a>|&nbsp<a href="script:;" >老猫粮</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >猫罐头/妙鲜包</a></dt>
                                <dd>|&nbsp<a href="script:;" >成猫湿粮</a>|&nbsp<a href="script:;" >幼猫湿粮</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >猫猫零食</a></dt>
                                <dd>|<a href="script:;" >肉质零食</a> |
                                    <a href="script:;" >猫条/猫草</a> |
                                    <a href="script:;" >果冻</a> |
                                    <a href="script:;" >猫咪洁牙零食</a> |
                                    <a href="script:;" >其它零食</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >猫猫保健品</a></dt>
                                <dd>|<a href="script:;" >美毛护肤</a> |
                                    <a href="script:;" >补钙强骨</a> |
                                    <a href="script:;" >微量矿物</a> |
                                    <a href="script:;" >调理肠胃</a> |
                                    <a href="script:;" >综合营养</a> |
                                    <a href="script:;" >速效化毛</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >猫猫医疗</a></dt>
                                <dd>|<a href="script:;" >体内驱虫</a> |
                                    <a href="script:;" >体外驱虫</a> |
                                    <a href="script:;" >口腔修护</a> |
                                    <a href="script:;" >眼部护理</a> |
                                    <a href="script:;" >耳道清洁</a> |
                                    <a href="script:;" >体内病源感染</a> |
                                    <a href="script:;" >皮肤问题</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >猫猫香波</a></dt>
                                <dd>|<a href="script:;" >幼猫专用</a> |
                                    <a href="script:;" >药用香波</a> |
                                    <a href="script:;" >美毛去味</a> |
                                    <a href="script:;" >特色毛发</a> |
                                    <a href="script:;" >干洗粉</a> |
                                    <a href="script:;" >护毛素</a> |
                                    <a href="script:;" >稀释瓶</a> |
                                    <a href="script:;" >洗手液</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >日常用品</a></dt>
                                <dd>|<a href="script:;" >器具系列</a> |
                                    <a href="script:;" >出行装备</a> |
                                    <a href="script:;" >排便用品</a> |
                                    <a href="script:;" >环境清洁</a> |
                                    <a href="script:;" >猫砂系列</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >美容器材</a></dt>
                                <dd>|<a href="script:;" >吊牌挂件</a> |
                                    <a href="script:;" >毛巾系列</a> |
                                    <a href="script:;" >梳子/刷子系列</a> |
                                    <a href="script:;" >修剪系列</a> |
                                    <a href="script:;" >洗澡用品</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >猫猫玩具</a></dt>
                                <dd>|<a href="script:;" >猫爬架</a> |
                                    <a href="script:;" >益智训导</a> |
                                    <a href="script:;" >互动玩具</a> |
                                    <a href="script:;" >猫薄荷玩具</a> |
                                    <a href="script:;" >猫抓板</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >猫衣服/猫窝</a></dt>
                                <dd>|<a href="script:;" >猫窝</a> |
                                    <a href="script:;" >毛毯/垫子</a> |
                                    <a href="script:;" >变身帽</a></dd>
                            </dl>
                        </div>
                    </div>
                    <!-- 奇趣小宠 -->
                    <div class="top_list">
                        <div class="top_list_l">
                            <div class="top_tit">
                                <em style="background-position:-262px -171px"></em><a href="script:;">奇趣小宠</a>
                                <span></span>
                            </div>
                            <div class="top_body" style="height:22px">
                                <span><a href="script:;">兔子</a></span>
                                <span><a href="script:;">仓鼠</a></span>
                                <span><a href="script:;">龙猫</a></span>
                            </div>
                        </div>
                        <!-- 要显示的区域 -->
                        <div class="condiv0" id="condiv003">
                            <dl>
                                <dt><a href="script:;" >兔兔用品</a></dt>
                                <dd>|&nbsp<a href="script:;" >兔兔饲料/零食</a>|&nbsp<a href="script:;" >兔兔医疗/保健品</a>|&nbsp<a href="script:;" >兔兔磨牙</a>|&nbsp<a href="script:;" >兔兔牧草</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >龙猫用品</a></dt>
                                <dd>|&nbsp<a href="script:;" >龙猫饲料/零食</a>|&nbsp<a href="script:;" >龙猫玩具</a>|&nbsp<a href="script:;" >龙猫牧草</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >仓鼠用品</a></dt>
                                <dd>|&nbsp<a href="script:;" >仓鼠饲料/零食</a>|&nbsp<a href="script:;" >仓鼠医疗/保健品</a>|&nbsp<a href="script:;" >仓鼠玩具</a></dd>
                            </dl>

                        </div>
                    </div>
                    <!-- 水族市场 -->
                    <div class="top_list">
                        <div class="top_list_l">
                            <div class="top_tit">
                                <em style="background-position:-195px -197px"></em><a href="script:;">水族市场</a>
                                <span></span>
                            </div>
                            <div class="top_body" style="height:44px">
                                <span><a href="script:;">水族箱</a></span>
                                <span><a href="script:;">饲料</a></span>
                                <span><a href="script:;">药剂</a></span>
                                <span><a href="script:;">氧气泵</a></span>
                                <span><a href="script:;">过滤器</a></span>
                                <span><a href="script:;">温控</a></span>
                            </div>
                        </div>
                        <!-- 要显示的区域 -->
                        <div class="condiv0" id="condiv004">
                            <dl>
                                <dt><a href="script:;" >鱼缸/水族箱</a></dt>
                                <dd>|&nbsp<a href="script:;" >鱼缸配件</a>|&nbsp<a href="script:;" >鱼缸地柜</a></dd>
                            </dl>

                            <dl>
                                <dt><a href="script:;" >鱼饲料</a></dt>
                                <dd>|<a href="script:;" >血鹦鹉饲料</a> |
                                    <a href="script:;" >罗汉鱼饲料</a> |
                                    <a href="script:;" >锦鲤鱼饲料</a> |
                                    <a href="script:;" >龙鱼饲料</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >药品系列</a></dt>
                                <dd>|<a href="script:;" >硝化细菌</a> |
                                    <a href="script:;" >净水剂</a> |
                                    <a href="script:;" >杀菌</a> |
                                    <a href="script:;" >疾病治疗</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >氧气泵</a></dt>
                                <dd>|<a href="script:;" >单孔</a> |
                                    <a href="script:;" >双孔</a> |
                                    <a href="script:;" >四孔</a> |
                                    <a href="script:;" >四孔以上</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >过滤器</a></dt>
                                <dd>|<a href="script:;" >内置过滤器</a> |
                                    <a href="script:;" >外置过滤桶</a> |
                                    <a href="script:;" >上置过滤器</a> |
                                    <a href="script:;" >壁挂过滤器</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >温控设备</a></dt>
                                <dd>|<a href="script:;" >温度计</a> |
                                    <a href="script:;" >加热棒</a> |
                                    <a href="script:;" >风扇</a> |
                                    <a href="script:;" >控制器</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >过滤材料</a></dt>
                                <dd>|<a href="script:;" >过滤棉</a> |
                                    <a href="script:;" >生化棉</a> |
                                    <a href="script:;" >陶瓷环</a> |
                                    <a href="script:;" >生化球</a> |
                                    <a href="script:;" >细菌屋</a> |
                                    <a href="script:;" >活性炭</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >其它</a></dt>
                                <dd>|<a href="script:;" >照明器材</a> |
                                    <a href="script:;" >造景/装饰</a> |
                                    <a href="script:;" >杀菌灯</a> |
                                    <a href="script:;" >喂食器</a> |
                                    <a href="script:;" >水草/肥料</a></dd>
                            </dl>
                        </div>
                    </div>
                    <!-- 爬虫用品 -->
                    <div class="top_list">
                        <div class="top_list_l">
                            <div class="top_tit">
                                <em style="background-position:-226px -197px"></em><a href="script:;">爬虫用品</a>
                                <span></span>
                            </div>
                            <div class="top_body" style="height:25px">
                                <span><a href="script:;">陆龟</a></span>
                                <span><a href="script:;">水龟</a></span>
                                <span><a href="script:;">蜥蜴</a></span>
                            </div>
                        </div>
                        <!-- 要显示的区域 -->
                        <div class="condiv0" id="condiv005">
                            <dl>
                                <dt><a href="script:;" >陆龟用品</a></dt>
                                <dd>|&nbsp<a href="script:;" >龟粮</a>|&nbsp<a href="script:;" >龟箱</a>|&nbsp<a href="script:;" >灯具</a>|&nbsp<a href="script:;" >加热</a>|&nbsp<a href="script:;" >保健用品</a>
                                </a>|&nbsp<a href="script:;" >垫材</a>
                              </a>|&nbsp<a href="script:;" >食具</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;" >水龟用品</a></dt>
                                <dd>|&nbsp<a href="script:;">龟粮</a>|&nbsp<a href="script:;" >龟箱</a>|&nbsp<a href="script:;" >灯具</a>|&nbsp<a href="script:;" >加热</a>|&nbsp<a href="script:;" >保健用品</a></dd>
                            </dl>
                            <dl>
                                <dt><a href="script:;">蜥蜴守宫用品</a></dt>
                                <dd>|<a href="script:;">保健品系列</a> |
                                    <a href="script:;">加热取暖系列</a> |
                                    <a href="script:;">垫材类</a></dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="top_middle">
                    <div class="auto_img_wrap">
                        <div class="auto_wrap">
                            <div class="auto_img">
                                <div id="content">
                                    <a href="script:;" ><img src="source/register_img/04.jpg" alt="" /></a>
                                    <a href="script:;" ><img src="source/register_img/01.jpg" alt="" class="show" /></a>
                                    <a href="script:;" ><img src="source/register_img/02.jpg" alt="" class="show" /></a>
                                    <a href="script:;" ><img src="source/register_img/03.jpg" alt="" class="show" /></a>
                                    <a href="script:;" ><img src="source/register_img/04.jpg" alt="" class="show" /></a>
                                    <a href="script:;" ><img src="source/register_img/01.jpg" alt="" /></a>
                                </div>
                                <div id="nums">
                                    <ul>
                                        <li>1</li>
                                        <li>2</li>
                                        <li>3</li>
                                        <li>4</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="top_middle_bottom">
                        <div class="middle_bottom">
                            <a href="script:;"><img src="source/register_img/001.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/002.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/003.jpg" alt="" style="border-right:0px" /></a>
                        </div>
                    </div>
                </div>
                <div class="top_right">
                    <div class="top_right_wrap">
                        <div class="right_top">
                            <a href="script:;" ><img src="source/register_img/005.jpg" alt="" /></a>
                        </div>
                        <div class="right_middle">
                            <div class="right_middle_tit">
                                <p>波奇资讯</p>
                            </div>
                            <div class="tempWrap">
                                <div class="tempWrap_go">
                                    <marquee direction="left" behavior="scroll" scrolldelay="300">
                                        <a href="script:;">·江浙沪皖京津粤满59元免运费</a>
                                        <a href="script:;">·江浙沪皖京津粤满59元免运费</a>
                                        <a href="script:;">·江浙沪皖京津粤满59元免运费</a>
                                    </marquee>
                                </div>
                            </div>
                        </div>
                        <div class="right_dy">
                            <strong>订阅促销信息</strong>
                            <div class="dy">
                                <input type="text" name="name" value="" class="text" placeholder="请输入Email地址">
                                <input type="button" name="name" value="订阅" class="dy_btn">
                            </div>
                        </div>
                        <div class="right_bottom">
                            <dl>
                                <dt><img src="source/register_img/tel.jpg" alt="" /></dt>
                                <dd class="name">波奇客户端</dd>
                                <dd class="name_bottom">注册送100元，首单再送50元</dd>
                            </dl>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- 主体内容 -->
    <div class="content_mainstay">
        <!-- 改变内容宽度 -->
        <div class="content_width" id="change_width">
            <!--  第一行火爆商品-->
            <div class="content_first">
                <div class="first_header">
                    <h2>火爆商品</h2>
                </div>
                <div class="first_content_wrap">
                    <div class="first_content kind">

                    </div>
                </div>

            </div>
            <!-- 第二行知名品牌 -->
            <div class="content_two">
                <!-- 第二行头部 -->
                <div class="two_header">
                    <h3>知名品牌&nbsp&nbsp放心选择</h3>
                </div>
                <div class="two_content">
                    <div class="two_line">
                        <a href="script:;"><img src="source/register_img/two01.jpg" alt="" /></a>
                    </div>
                    <div class="two_line">
                        <a href="script:;"><img src="source/register_img/two02.jpg" alt="" class="two_imgOne" /></a>
                        <a href="script:;"><img src="source/register_img/two03.jpg" alt="" class="two_imgTwo" /></a>
                    </div>
                    <div class="two_line">
                        <a href="script:;"><img src="source/register_img/two04.jpg" alt="" /></a>
                    </div>
                    <div class="two_line">
                        <a href="script:;"><img src="source/register_img/two05.jpg" alt="" class="two_imgOne" /></a>
                        <a href="script:;"><img src="source/register_img/two06.jpg" alt="" class="two_imgTwo" /></a>
                    </div>
                    <div class="two_line">
                        <a href="script:;"><img src="source/register_img/two07.jpg" alt="" /></a>
                    </div>
                    <div class="two_line" style="margin-right:0px">
                        <a href="script:;"><img src="source/register_img/two08.jpg" alt="" class="two_imgOne" /></a>
                        <a href="script:;"><img src="source/register_img/two09.jpg" alt="" class="two_imgTwo" /></a>
                    </div>
                </div>
            </div>
            <!-- 第三行 狗狗商品-->
            <div class="content_three" id="dog">
                <div class="three_header">
                    <div class="three_left">
                        <em></em>
                        <h3><a href="script:;">狗狗商品</a></h3>
                    </div>
                    <div class="three_middle" id="dog_three">
                      <a href="script:;">日用品</a>
                        <a href="script:;">狗粮</a>
                        <a href="script:;">保健品</a>
                        <a href="script:;" style="background-image: none">衣服窝</a>
                        <!-- <a href="script:;">湿粮</a>
                        <a href="script:;">零食</a>
                        <a href="script:;">医疗</a>
                        <a href="script:;">沐浴露</a>
                        <a href="script:;">美容</a>
                        <a href="script:;">玩具</a> -->
                    </div>
                </div>
                <div class="three_bottom">
                    <div class="three_partOne">
                        <a href="script:;"><img src="source/register_img/partOne.jpg" alt="" /></a>
                    </div>
                    <div class="three_partTwo">
                        <!-- 上边产品 -->
                        <div class="three_pT_top" id="dog_nav">
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>

                        </div>
                        <!-- 下边图标 -->
                        <div class="three_pT_bottom">
                            <a href="script:;"><img src="source/register_img/a1.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a2.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a3.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a4.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a5.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a6.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a7.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a8.jpg" alt="" style="border-right:0px" /></a>
                        </div>
                    </div>
                    <!-- 最左边 -->
                    <div class="three_pTright bigkind">
                        <h3>波奇推荐</h3>

                    </div>
                </div>
            </div>
            <!-- 第四行猫咪商品 -->
            <div class="content_three" id="cat">
                <div class="three_header">
                    <div class="three_left">
                        <em style="background-position:-57px 0"></em>
                        <h3><a href="script:;">猫咪商品</a></h3>
                    </div>
                    <div class="three_middle" id="four_cat">
                      <a href="script:;">日用品</a>
                        <a href="script:;">猫粮</a>
                        <a href="script:;">保健品</a>
                        <a href="script:;" style="background-image: none">衣服窝</a>
                        <!-- <a href="script:;">湿粮</a>
                        <a href="script:;">零食</a>
                        <a href="script:;">香波</a>
                        <a href="script:;">医疗</a>
                        <a href="script:;">玩具</a>
                        <a href="script:;" style="background-image: none">美容</a> -->
                    </div>
                </div>
                <div class="three_bottom">
                    <div class="three_partOne">
                        <a href="script:;"><img src="source/register_img/maoleft.jpg" alt="" /></a>
                    </div>
                    <div class="three_partTwo">
                        <!-- 上边产品 -->
                        <div class="three_pT_top" id="cat_nav">
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>

                        </div>
                        <!-- 下边图标 -->
                        <div class="three_pT_bottom">
                            <a href="script:;"><img src="source/register_img/a1.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a2.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a3.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a4.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a5.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a6.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a7.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a8.jpg" alt="" style="border-right:0px" /></a>
                        </div>
                    </div>
                    <!-- 最左边 -->
                    <div class="three_pTright bigkind">
                        <h3>波奇推荐</h3>

                    </div>
                </div>
            </div>
            <!-- 第五行小宠 商品-->
            <div class="content_three" id="spet">
                <div class="three_header">
                    <div class="three_left">
                        <em style="background-position:-113px 0"></em>
                        <h3><a href="script:;">小宠商品</a></h3>
                    </div>
                    <div class="three_middle" id="five_hare">
                        <a href="script:;">兔兔用品</a>
                        <a href="script:;">仓鼠用品</a>
                        <a href="script:;">龙猫用品</a>
                        <a href="script:;" style="background-image: none">天竺鼠用品</a>
                    </div>
                </div>
                <div class="three_bottom">
                    <div class="three_partOne">
                        <a href="script:;"><img src="source/register_img/hareleft.jpg" alt="" /></a>
                    </div>
                    <div class="three_partTwo">
                        <!-- 上边产品 -->
                        <div class="three_pT_top" id="hare_nav">
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>
                        </div>
                        <!-- 下边图标 -->
                        <div class="three_pT_bottom">
                            <a href="script:;"><img src="source/register_img/a1.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a2.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a3.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a4.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a5.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a6.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a7.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a8.jpg" alt="" style="border-right:0px" /></a>
                        </div>
                    </div>
                    <!-- 最左边 -->
                    <div class="three_pTright bigkind">
                        <h3>波奇推荐</h3>

                    </div>
                </div>
            </div>
            <!-- 第六行水族商品 -->
            <div class="content_three" id="fish">
                <div class="three_header">
                    <div class="three_left">
                        <em style="background-position:-170px 0"></em>
                        <h3><a href="script:;">水族商品</a></h3>
                    </div>
                    <div class="three_middle" id="six_fish">
                        <a href="script:;">鱼缸</a>
                        <a href="script:;">鱼饲料</a>
                        <a href="script:;">药水</a>
                        <a href="script:;">材料设备</a>
                        <!-- <a href="script:;">氧气泵</a>
                        <a href="script:;">潜水泵</a>
                        <a href="script:;">温控</a>
                        <a href="script:;" style="background-image: none">造景装饰</a> -->
                    </div>
                </div>
                <div class="three_bottom">
                    <div class="three_partOne">
                        <a href="script:;"><img src="source/register_img/fishleft.jpg" alt="" /></a>
                    </div>
                    <div class="three_partTwo">
                        <!-- 上边产品 -->
                        <div class="three_pT_top" id="fish_nav">
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>

                        </div>
                        <!-- 下边图标 -->
                        <div class="three_pT_bottom">
                            <a href="script:;"><img src="source/register_img/a1.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a2.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a3.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a4.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a5.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a6.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a7.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a8.jpg" alt="" style="border-right:0px" /></a>
                        </div>
                    </div>
                    <!-- 最左边 -->
                    <div class="three_pTright bigkind">
                        <h3>波奇推荐</h3>

                    </div>
                </div>
            </div>
            <!-- 第七行爬虫商品 -->
            <div class="content_three" id="reptile">
                <div class="three_header">
                    <div class="three_left">
                        <em style="background-position:-227px 0"></em>
                        <h3><a href="script:;">爬虫商品</a></h3>
                    </div>
                    <div class="three_middle" id="seven_tortoise">
                        <a href="script:;">陆龟用品</a>
                        <a href="script:;">水龟用品</a>
                        <a href="script:;" style="background-image: none">其他类</a>
                    </div>
                </div>
                <div class="three_bottom">
                    <div class="three_partOne">
                        <a href="script:;"><img src="source/register_img/tortoiseleft.jpg" alt="" /></a>
                    </div>
                    <div class="three_partTwo">
                        <!-- 上边产品 -->
                        <div class="three_pT_top" id="tortoise_nav">
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>
                            <div class="dog_0 kind">

                            </div>
                        </div>
                        <!-- 下边图标 -->
                        <div class="three_pT_bottom">
                            <a href="script:;"><img src="source/register_img/a1.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a2.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a3.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a4.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a5.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a6.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a7.jpg" alt="" /></a>
                            <a href="script:;"><img src="source/register_img/a8.jpg" alt="" style="border-right:0px" /></a>
                        </div>
                    </div>
                    <!-- 最左边 -->
                    <div class="three_pTright bigkind">
                        <h3>波奇推荐</h3>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="parry"></div>
    <div class="ensure">
        <div class="ensure_img">
            <img src="source/images/ensure.png" alt="" />
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href="#">关于我们</a></li>|
            <li><a href="#">友情链接</a></li>|
            <li><a href="#">诚聘英才</a></li>|
            <li><a href="#">联系我们</a></li>|
            <li><a href="#">网站地图</a></li>|
            <li><a href="#">意见反馈</a></li>|
            <li><a href="#">帮助中心</a></li>|
            <li><a href="#">客服热线：123456789</a></li>
        </ul>
        <p>
            Copyright © 2007-2016 Boqii.com All Rights Reserved 光橙（上海）信息科技有限公司 版权所有 沪ICP备13034501号-2 增值电信业务经营许可证：沪B2-20140120
        </p>
    </div>
</body>

</html>
<script src="js/tween.js" charset="utf-8"></script>
<script src="js/auto_img.js" charset="utf-8"></script>
<script src="js/nav.js" charset="utf-8"></script>
<script type="text/javascript">
var register = byClass("register")[0];
var userLogin = byClass("userLogin")[0];
var userName = getId("userName");
var quit = getId("quit");
window.ready = readStorage();
setInterval(readStorage,2000);
//读取storage的数据
function readStorage(){
  var storage = window.localStorage;
  if (typeof(storage["user"])=='undefined') {
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else if(storage["user"]==""){
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else {
    var myDate =  new Date();
    var currenTime = myDate.getTime();
    if (currenTime >= Number(storage["userTime"])+3600000) {
      storage["user"] =="";
    }else {
        register.style.display ="none";
        userLogin.style.display = "inline-block";
        userName.innerText = storage["user"];
    }

  }
}
quit.onclick = function (){
  var storage = window.localStorage;
  register.style.display ="inline-block";
  userLogin.style.display = "none";
  storage["user"] = "";
}


//数据请求
    var XMLHttp
    if (window.ActiveXObject) {
      XMLHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }else{
      XMLHttp = new XMLHttpRequest();
    }
    var j = 0;
    var k = 0;

    var kind = document.getElementsByClassName("kind");
    var bigkind = document.getElementsByClassName("bigkind");
      url = "php/kind.php?kind="+(j);
      // console.log(url);
      XMLHttp.open('get',url,true);
      XMLHttp.send(null);
      XMLHttp.onreadystatechange = function () {
        if (XMLHttp.readyState == 4) {
          if (XMLHttp.status == 200) {
            // console.log(XMLHttp.response);
            if (j<=19) {
              obj = JSON.parse(XMLHttp.response);
              // console.log(obj[0]);
              for (var i = 0; i < 8; i++) {
                var objbody = JSON.parse(obj[i]);
                // console.log(objbody);
                var dog_wares = document.createElement("dl");
                dog_wares.className = "dog_wares";
                dog_wares.innerHTML = '<dt><a href="show.html?'+objbody.id+'"target="_blank"><img src="'+objbody.imgurl1+'" alt="" /></a></dt><dd><a href="show.html?'+objbody.id+'" target="_blank">'+objbody.name+'</a></dd><dd><span class="dog_money">￥'+objbody.thisprice+'</span ><span class="dog_sales">已售126180</span></dd>';
                kind[j].appendChild(dog_wares);
              }
              j++;
            }else {
              obj = JSON.parse(XMLHttp.response);
              var arr =[];
              for (var i = 0; i < 6; i++) {
                function suiji() {
                  random = Math.floor(Math.random()*obj.length);
                  for (var l = 0; l < arr.length; l++) {
                    console.log(random == arr[l]);
                    if (random == arr[l]) {
                      suiji();
                    }
                  }
                }
                suiji();
                arr.push(random);
                console.log(random);
                var objbody = JSON.parse(obj[random]);
                // console.log(objbody);
                var rows_one = document.createElement("dl");
                rows_one.className = "rows_one";
                rows_one.innerHTML = '<dl class="rows_one"><dt><a href="show.html?'+objbody.id+'"target="_blank"><img src="'+objbody.imgurl1+'" alt="" /></a></dt><dd class="rows_name"><a href="show.html?'+objbody.id+'"target="_blank">'+objbody.name+'</a></dd><dd style="color:#e53;padding-top:8px">￥'+objbody.thisprice+'</dd></dl>';
                bigkind[k-1].appendChild(rows_one);
              }
            }
              if (j<=19) {
              url = "php/kind.php?kind="+(j);

                // console.log(url);
                XMLHttp.open('get',url,true);
                XMLHttp.send(null);
              }else{
                k++;
                url = "php/bigkind.php?kind="+k;
                console.log(url);
                if (k<=5) {
                  XMLHttp.open('get',url,true);
                  XMLHttp.send(null);

                }
              }
          }
        }
      }
      var shoplist = document.getElementById("shoplist");
      shoplist.onclick = function () {
        window.open('list.html');
      }
      var keyword = document.getElementById("keyword");
      var search = document.getElementById("search");
      search.onclick = function () {
        if (!keyword.value) {
          keyword.focus();
        }else{
          window.open('wares.html?'+keyword.value);
        }
      }
</script>
